<template>
  <div class="tobar">
    <div class="wrap tobar_box">
      <div class="welcome">欢迎来到叩丁狼积分商城</div>
      <ul class="right">
        <li>
          <img :src="userInfo.headImg" width="23px" alt="" />
          用户名：{{ userInfo.nickName }}
        </li>
        <li>我的积分：{{ userInfo.coin }}</li>
        <li>获取积分</li>
        <li>叩丁狼官网</li>
        <li>
          <a
            href="###"
            class="login_btn"
            @click="changloginshow(true)"
            v-if="!loginStatusShow"
            >登陆</a
          >
          <a href="###" class="login_btn" v-else>
            <img src="../assets/img/cart.png" alt="" />
            <span>购物车</span>
            <span class="num">{{ cartTotal }}</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import { start } from "repl";
import { mapMutations, mapState, mapActions } from "vuex";
import { wechatApi } from "../request/api";
export default {
  methods: {
    ...mapMutations({
      changloginshow: "Login/changloginshow",
      changLoginStatus: "LoginStatus/changLoginStatus",
      changwechatshow: "WechatStatus/changwechatshow",
      inituserInfo: "UserInfo/inituserInfo",
    }),
    ...mapActions({
      asyncChangtoastshow: "ToastStatus/asyncChangtoastshow",
      asyncchanguserInfo: "UserInfo/asyncchanguserInfo",
    }),
  },
  computed: {
    ...mapState({
      loginStatusShow: (state) => state.LoginStatus.loginStatusShow,
      cartTotal: (state) => state.UserInfo.cartTotal,
      userInfo: (state) => state.UserInfo.userInfo,
    }),
  },
  created() {
    this.$router.onReady(async () => {
      // console.log(this.$route.query.code);
      let code = this.$route.query.code;

      if (code) {
        let res = await wechatApi({ code });
        console.log(res);
        if (res.code == 0) {
          // 1.提示框
          this.asyncChangtoastshow({
            show: true,
            msg: res.message,
            type: "success",
          });
          // 2.存token
          localStorage.setItem("token", res["x-auth-token"]);
          // 3.切换tobar
          this.changLoginStatus(true);
          // 4.清除code
          this.$route.query.code && this.$router.push(this.$route.path);
          // 5.获取用户信息
          this.asyncchanguserInfo();
        } else if (res.code == 400) {
          // 1.提示框
          this.asyncChangtoastshow({
            show: true,
            msg: res.message,
            type: "danger",
          });
          // 2.重新弹出二维码
          this.changloginshow(true);
          this.changwechatshow(false);
          // 微信登录第一步：申请微信登录二维码
          let _this = this;
          new WxLogin({
            id: "wechat",
            appid: "wx67cfaf9e3ad31a0d", // 这个appid要填死
            scope: "snsapi_login",
            // 扫码成功后重定向的接口
            redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
            // state填写编码后的url
            state: encodeURIComponent(
              window.btoa("http://127.0.0.1:8080" + _this.$route.path)
            ),
            // 调用样式文件
            href: "data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCg0KLmltcG93ZXJCb3ggLndycF9jb2RlIGltZyB7DQogIHdpZHRoOiA2MCU7DQogIGhlaWdodDogYXV0bzsNCn0=",
          });
        } else if (res.code == 407) {
          // 1.提示框
          this.asyncChangtoastshow({
            show: true,
            msg: res.message,
            type: "warning",
          });
          // 2.存uuid
          localStorage.setItem("uuid", res.uuid);
          // 3.自动打开登陆框
          this.changloginshow(true);
        }
      }
      // 没有code时，普通刷新
      else {
        let token = localStorage.getItem("token");
        if (token) {
          // 5.获取用户信息
          this.asyncchanguserInfo();
        }
      }
    });
  },

  // 处理没有token时，点击导航
  watch: {
    "$route.path": {
      handler(newVal, old) {
        if (newVal != old) {
          let token = localStorage.getItem("token");
          this.changLoginStatus(Boolean(token));
          if (!token) {
            this.inituserInfo();
          }
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.tobar {
  background-color: #242b39;
  height: 40px;
  font-size: 14px;
  font-family: SourceHanSansSC;
  font-weight: 300;
  color: #fffefe;
  line-height: 40px;

  .tobar_box {
    display: flex;
    justify-content: space-between;
  }

  .right li {
    float: left;
    margin-left: 20px;
    cursor: pointer;
  }

  img {
    vertical-align: middle;
    border-radius: 50%;
  }

  .login_btn {
    width: 124px;
    height: 40px;
    color: white;
    text-decoration: none;
    background: #0a328e;
    display: block;
    text-align: center;

    span {
      margin-left: 8px;
      &.num {
        background-color: red;
        border-radius: 50%;
        font-size: 12px;
        padding: 2px 4px;
      }
    }
  }
}
</style>